<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>
            test
        </title>
    </head>


    <body>

        <div id = "mask">
            <div class = "center">
                <h2 class = "title">
                    <img src = "1.jpg" alt = "">

                    <a href = "javascript:void(0)" @click = "prev" class = "left">
                        <img src = "prev.jpg" alt = "">
                    </a>

                    <a href = "javascript:void(0)" @click = "next" class = "right">
                        <img src = "next.jpg" alt = "">
                    </a>

                </h2>
            </div>
        </div>


        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            var app = new Vue ({
                el:"#mask",
                data: {
                    imgArr:["1.jpg", "2.jpg", "3.jpg"],
                    index = 0,

                },
                methods: {
                    prev:function() {
                        this.index--;
                    },
                    next:function() {
                        this.index++;
                    }
                }
            })
        </script>

    </body>
</html>